<template>
    <div class="step-story-container-template">
        <div class="control-bar">
            <h3>Campaign / Story</h3>
        </div>
        <div class="container">

            <el-row class="intro">
                <h2>
                    Pitch Video or Image
                </h2>
                <p class="sub-header">
                    Add a video or image to appear on the top of your campaign page. Campaigns with videos raise 2000%
                    more than
                    campaigns without videos. Keep your video 2-3 minutes.
                </p>
            </el-row>

            <el-row class="form-area">
                <div class="form-item">
                    <el-tabs :tab-position="tabPosition">
                        <el-tab-pane label="VIDEO">
                            <div class="form-item">
                                <label class="entreField-label">
                                    Video URL
                                    <span class="entreField-required">*</span>
                                </label>
                                <div class="entreField-sublabel">
                                    Enter a YouTube or Vimeo URL to appear at the top of your campaign page.
                                </div>
                                <div class="video-input-area">
                                    <el-input placeholder="请输入内容" v-model="pitchVideo">
                                        <template slot="prepend">Http://</template>
                                    </el-input>
                                </div>


                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="IMAGE">
                            <div class="form-item">
                                <label class="entreField-label">
                                    Pitch Image
                                    <span class="entreField-required">*</span>
                                </label>
                                <div class="entreField-sublabel">
                                    Upload an image to appear at the top of your campaign page.
                                </div>
                                <div class="entreField-sublabel">
                                    695 x 460 recommended resolution.
                                </div>

                                <el-upload
                                        :action="uploadHost"
                                        name="picture"
                                        list-type="picture-card"
                                        :on-preview="handlePictureCardPreview"
                                        :on-success="cardImageUploadHandler"
                                        :on-remove="handleRemove"
                                        :with-credentials="true"
                                        :headers="uploadHeaders">
                                    <i class="el-icon-plus"></i>
                                </el-upload>
                                <el-dialog :visible.sync="dialogVisible">
                                    <img width="100%" :src="dialogImageUrl" alt="">
                                </el-dialog>


                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
                <div class="form-item">
                    <label class="entreField-label">
                        Overlay Image
                        <span class="entreField-required">*</span>
                    </label>
                    <div class="entreField-sublabel">
                        <div class="entreField-sublabel">
                            Choose an image to describe your campaign in overview area.
                        </div>
                        <div class="entreField-sublabel">
                            695 x 460 recommended resolution.
                        </div>
                    </div>
                    <el-upload
                            :action="uploadHost"
                            name="picture"
                            list-type="picture-card"
                            :on-preview="handlePictureCardPreview"
                            :on-success="overLayImageUploadHandler"
                            :on-remove="handleRemove"
                            :with-credentials="true"
                            :headers="uploadHeaders">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </div>

            </el-row>


            <el-row class="form-area border-div">

                <el-row class="intro" style="padding-top: 26px;">
                    <h2>
                        Campaign Overview
                    </h2>
                    <p class="sub-header">
                        Introduce yourself, your background, your campaign and why it’s important to you. Express the
                        magnitude of
                        what contributors will help you achieve.

                    </p>
                </el-row>

                <div class="form-item">
                    <label class="entreField-label">
                        Campaign Overview
                        <span class="entreField-required">*</span>
                    </label>
                    <div class="entreField-sublabel">
                        Lead with a compelling statement that describes your campaign and why it’s important to you,
                        highlight key
                        campaign features, and remember - keep it short!
                    </div>

                    <el-input
                            type="textarea"
                            :rows="8"
                            placeholder=""
                            v-model="campaignOverview">
                    </el-input>

                </div>

            </el-row>
            <el-row class="form-area border-div">

                <el-row class="intro" style="padding-top: 26px;">
                    <h2>
                        Campaign Pitch
                    </h2>
                    <p class="sub-header">
                        Tell potential contributors more about your campaign. Provide details that will motivate people
                        to
                        contribute. A good pitch is compelling, informative, and easy to digest.

                    </p>
                    <div class="form-item" style="margin-top: 6px;">
                        <div class="entreField-sublabel">
                            Images that are intended to span the width of the story section should have a minimum width
                            of 695 pixels.
                            Images wider than 695 pixels will be resized proportionally.
                        </div>
                    </div>

                    <!--编辑器-->
                    <tinymce :height=400 ref="editor" v-model="campaignPitch"></tinymce>

                </el-row>
            </el-row>
            <el-row class="ope-area border-div">
                <el-button type="primary" @click="toStep3">Save & Continue</el-button>
            </el-row>
        </div>

    </div>
</template>

<script>
    import Tinymce from 'src/components/Tinymce'
    import Constant from '@/env'
    import {getToken, setToken, removeToken} from '@/utils/auth'
    import {mapState, mapMutations} from 'vuex'

    export default {
        name: "Story",
        data() {
            return {

                pitchVideo: '',
                pitchImage: '',
                overlayImage: '',
                campaignOverview: '',

                campaignPitch: '<p>我是测试数据我是测试数据</p><p><img class=\"wscnph\" src=\"https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943\" data-wscntype=\"image\" data-wscnh=\"300\" data-wscnw=\"400\" data-mce-src=\"https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943\"></p>\"',
                dialogImageUrl: '',
                dialogVisible: false,
                tabPosition: "",
                uploadHeaders: {}
            }
        }
        ,
        components: {
            Tinymce
        },
        computed: {
            ...mapState({
                'userId': state => state.user.userId,
                'userName': state => state.user.userName,
                'campaignInfo': state => state.campaign.item
            }),
            uploadHost() {
                return Constant.baseUrl + '/crowd-api/api/image/upload'
            }
        },
        mounted() {
            // 添加上传headers
            this.uploadHeaders["token"] = getToken()
            this.uploadHeaders["userId"] = this.userId
        },
        // 页面进入之前，请求数据
        beforeRouteEnter(to, from, next) {

            next(vm => {
                var campaignItem = vm.$store.state.campaign.item
                vm.campaignOverview = campaignItem.campaignOverview
                vm.campaignPitch = campaignItem.campaignPitch
                vm.overlayImage = campaignItem.overlayImage
                vm.pitchImage = campaignItem.pitchImage
                vm.pitchVideo = campaignItem.pitchVideo
                // vm.dialogVisible = true
            })
        },
        methods: {
            handleRemove(file, fileList) {
            }
            ,
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            toStep3() {

                var that = this
                this.$store.dispatch('SAVE_CAMPAIGN_INFO', {
                    'mutationName': 'SET_PITCH_VIDEO',
                    'value': this.pitchVideo
                })
                this.$store.dispatch('SAVE_CAMPAIGN_INFO', {
                    'mutationName': 'SET_PITCH_IMAGE',
                    'value': this.pitchImage
                })
                this.$store.dispatch('SAVE_CAMPAIGN_INFO', {
                    'mutationName': 'SET_OVERLAY_IMAGE',
                    'value': this.overlayImage
                })
                this.$store.dispatch('SAVE_CAMPAIGN_INFO', {
                    'mutationName': 'SET_CAMPAIGN_OVERVIEW',
                    'value': this.campaignOverview
                })
                this.$store.dispatch('SAVE_CAMPAIGN_INFO', {
                    'mutationName': 'SET_CAMPAIGN_PITCH',
                    'value': this.campaignPitch
                })
                this.$store.dispatch('SAVE_CAMPAIGN_INFO', {
                    'mutationName': 'SET_CAMPAIGN_STORY',
                    'value': this.campaignPitch
                })
                this.$store.dispatch('SAVE_CAMPAIGN_INFO', {
                    'mutationName': 'SET_OWNER_ID',
                    'value': this.userId
                })
                this.$store.dispatch('SAVE_CAMPAIGN_INFO', {
                    'mutationName': 'SET_OWNER_NAME',
                    'value': this.userName
                })


                 this.$router.push('/crowd/step3');

                /*this.$store.dispatch('createNewCampaign', this.campaignInfo).then((res) => {
                   console.log(res)
                }).catch((err) => {
                    console.log(err)
                })*/

            },
            // 文件上传成功回调(pitch image)
            cardImageUploadHandler(response, file, fileList) {
                if(0 == response.code) {
                    this.pitchImage = response.imageUrl
                }
            },
            // 文件上传成功回调(overview image)
            overLayImageUploadHandler(response, file, fileList) {
                if(0 == response.code) {
                    this.overlayImage = response.imageUrl
                }
            },
        }
    }
</script>

<style lang="scss" scoped>
    .step-story-container-template {
        .control-bar {
            display: flex;
            height: 81px;
            border-bottom: 1px solid rgb(200, 200, 200);
            align-items: center;
            padding: 40px;
            h3 {
                color: #2a2a2a;
                font-weight: bold;
            }
        }
        .container {
            margin-left: 26px;
            width: 950px;
            padding: 0 40px;

            .border-div {
                border-top: 1px solid #C8C8C8;
            }

            .intro {
                .sub-header {
                    ont-family: "Benton Sans", "Helvetica", "sans-serif";
                    font-size: 16px;
                    font-weight: normal;
                    letter-spacing: 0;
                    line-height: 24px;
                    margin-bottom: 10px;
                    max-width: 626px;
                }
            }
            .form-area {
                .form-item {
                    margin: 60px 0;
                    .entreField-label {
                        display: block;
                        font-family: "Benton Sans", "Helvetica", "sans-serif";
                        font-size: 16px;
                        font-weight: normal;
                        line-height: 26px;
                        letter-spacing: 0;
                        line-height: 24px;
                        min-height: 24px;
                        margin-bottom: 5px;
                    }
                    .entreField-sublabel {
                        font-family: "Benton Sans", "Helvetica", "sans-serif";
                        font-size: 14px;
                        font-weight: normal;
                        line-height: 20px;
                        color: #a8a8a8;
                        margin: 0 0 10px;
                    }
                    .entreField-required {
                        color: #FF324B;
                    }
                    .upper {
                        text-transform: uppercase;
                    }
                    .el-select {
                        width: 80%;
                    }
                    .video-input-area {
                        .el-input, .el-input-group {
                            width: 76%;
                        }
                        .el-button {
                            margin-left: 26px;
                        }
                    }

                }
                .muliti-input {
                    .el-input {
                        width: 180px;
                        margin-right: 15px;
                    }
                }
            }
            .ope-area {
                text-align: center;
                border-top: 1px solid #C8C8C8;
                padding-top: 66px;
                margin-bottom: 66px;
                .el-button--primary {
                    color: #fff;
                    background-color: #7A69B3;
                    border-color: #7A69B3;
                    text-transform: uppercase;
                }
            }
        }
    }
</style>
